<!--
 * @Author       : mark
 * @Date         : 2020-06-30
 * @copyleft GPL 2.0
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Makaka-图片</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Main css -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: 'Arial', sans-serif;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .slideshow-container {
            padding: 40px 0;
            position: relative;
            max-width: 906px;
            margin: 0 auto;
        }

        .slide {
            display: none;
            text-align: center;
        }

        .slide img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .slide.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        /* 箭头样式 */
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 40px;
            color: #333;
            background: rgba(255, 255, 255, 0.7);
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .prev:hover, .next:hover {
            background: rgba(255, 255, 255, 1);
            color: #000;
        }

        .prev {
            left: 20px;
        }

        .next {
            right: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .prev, .next {
                font-size: 30px;
                padding: 5px;
            }
        }
    </style>
</head>

<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">

    <!-- PRE LOADER -->
    <div class="preloader">
        <div class="spinner">
            <span class="spinner-rotate"></span>
        </div>
    </div>

    <!-- NAVIGATION SECTION -->
    <div class="navbar custom-navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                </button>
                <a href="/" class="navbar-brand">Makaka</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="smoothScroll" href="/">首页</a></li>
                    <li><a class="smoothScroll" href="/picture">图片</a></li>
                    <li><a class="smoothScroll" href="/video">视频</a></li>
                    <li><a class="smoothScroll" href="/login">登录</a></li>
                    <li><a class="smoothScroll" href="/register">注册</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- HOME SECTION -->
    <section id="home">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-1 col-md-2 col-sm-3">
                    <img src="images/profile-image.jpg" 
                         class="wow fadeInUp img-responsive img-circle"
                         data-wow-delay="0.2s" 
                         alt="about image">
                </div>
                <div class="col-md-8 col-sm-8">
                    <h1 class="wow fadeInUp" data-wow-delay="0.6s">图片测试</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Slideshow Section -->
    <section class="slideshow-container">
        <div class="slide active">
            <img src="images/instagram-image1.jpg" alt="Image 1">
        </div>
        <div class="slide">
            <img src="images/instagram-image2.jpg" alt="Image 2">
        </div>
        <div class="slide">
            <img src="images/instagram-image3.jpg" alt="Image 3">
        </div>
        <div class="slide">
            <img src="images/instagram-image4.jpg" alt="Image 4">
        </div>
        <div class="slide">
            <img src="images/instagram-image5.jpg" alt="Image 5">
        </div>

        <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
        <a class="next" onclick="changeSlide(1)">&#10095;</a>
    </section>

    <!-- SCRIPTS -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/magnific-popup-options.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/custom.js"></script>
    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.remove('active');
                if (i === index) {
                    slide.classList.add('active');
                }
            });
        }

        function changeSlide(direction) {
            currentSlide += direction;
            if (currentSlide >= slides.length) {
                currentSlide = 0; // 回到第一张
            } else if (currentSlide < 0) {
                currentSlide = slides.length - 1; // 跳到最后一张
            }
            showSlide(currentSlide);
        }

        // 初始化显示第一张图片
        showSlide(currentSlide);
    </script>
</body>

</html>